<script setup>
import {lightTheme, darkTheme, zhCN, dateZhCN} from 'naive-ui'
import Header from '@/pages/common/Header.vue'
import {blackTheme, whiteTheme} from '@/assets/theme'
import {useDefaultStore} from '@/stores/default'
const defaultStore = useDefaultStore()
const {appTheme} = storeToRefs(defaultStore)
</script>

<template>
  <!-- NaiveUI全局配置 -->
  <n-config-provider tag="main" :locale="zhCN" :date-locale="dateZhCN"
                     :theme="appTheme === 'white' ? lightTheme : darkTheme"
                     :theme-overrides="appTheme === 'white' ? whiteTheme : blackTheme">
    <!-- 挂载NaiveUI公共样式到body标签 -->
    <n-global-style/>
    <!--头部-->
    <n-el tag="header" class="zi10">
      <Header></Header>
    </n-el>
    <!-- 挂载css变量到main标签 -->
    <n-el tag="section">
      <!-- 路由页面 -->
      <router-view></router-view>
    </n-el>
  </n-config-provider>
</template>

<style scoped lang="less">
header {
  min-width: var(--windowMinWidth);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--header-background-color);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
